<template>
  <div id="coures">
    <toptitle>
      <span slot="center">特色课</span>
      <h3 slot="right">
        <van-icon name="search" @click="clickSearch"/>
      </h3>
    </toptitle>
    <van-dropdown-menu>
      <van-dropdown-item title="分类">
        <div class="btn-box">
          <van-button class="btn1">重置</van-button>
          <van-button class="btn2">确认</van-button>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="排序">
        <ul class="sortbar">
          <li>综合排序</li>
          <li>最新</li>
          <li>最热</li>
          <li>价格从低到高</li>
          <li>价格从高到低</li>
        </ul>
      </van-dropdown-item>
      <van-dropdown-item title="筛选" ref="item">
        <ul class="filterbar">
          <li v-for="(item,index) in filterdata" :key="index">
            {{item.name}}
          </li>
        </ul>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="big">
      <div class="list" v-for="(item,index) in coureslist" :key="index">
        <p class="tit">{{item.title}}</p>
        <p class="date"><van-icon name="clock-o" />{{dateFormat(new Date(item.end_play_date))}}|共{{item.sales_num}}课时</p>
        <div class="teacher">
          <img :src="item.teachers_list[0].teacher_avatar" alt="">
          <span class="name">{{item.teachers_list[0].teacher_name}}</span>
        </div>
        <div class="botmes">
          <span class="left">{{item.brows_num}}人已报名</span>
          <span class="right">{{item.price == 0 ? '免费' : item.price}}</span>
        </div>
      </div>
    </div>
    <div class="hint">没有更多了</div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Icon, DropdownMenu, DropdownItem, Button  } from 'vant';
import 'vant/lib/icon/style'
import 'vant/lib/dropdown-menu/style'
import 'vant/lib/dropdown-item/style'
import 'vant/lib/button/style'

Vue.use(Icon);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Button);
import Toptitle from '../components/common/toptitle/Toptitle.vue'
export default {
  components: { Toptitle },
  name:"Coures",
  data() {
    return {
      filterdata:[],
      coureslist:[],
    };
  },
  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    },
    clickSearch(){
      this.$emit("sendSearch",true)
    },
    dateFormat(time){
      return `${time.getFullYear()}-${time.getMonth() +1 > 10 ? (time.getMonth() + 1 ) : '0'+(time.getMonth() + 1 )}-${time.getDate() > 10 ? time.getDate() : '0'+ time.getDate()}
      ${time.getHours() > 10 ? time.getHours() : '0' + time.getHours()}:${time.getMinutes() > 10 ? time.getMinutes() : '0' + time.getMinutes()}:${time.getSeconds() > 10 ? time.getSeconds() : '0' + time.getSeconds()}`
    }
  },
  created() {
    this.$http({
      url:"/api/app/courseClassify",
      methods:"get"
    }).then(res=>{
      // console.log(res.data.data.appCourseType);
      this.filterdata=res.data.data.appCourseType
    }),
    this.$http({
      url:"/api/app/courseBasis?page=1&limit=10&",
      methods:"get",
      params:{
        page:1,
        limit:15
      }
    }).then(s=>{
      console.log(s.data.data);
      this.coureslist=s.data.data.list
    })
  },
}
</script>

<style scoped>
  .van-icon-search:before {
      font-weight: bold;
  }
  .btn-box{
    width: 100%;
    height: 90px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
  }
  .van-button{
    width: 140px;
    height: 30px;
  }
  .btn1{
    border: 1px solid #1989fa;
  }
  .btn2{
    background: rgb(235, 97, 0);
    border: 1px solid rgb(235, 97, 0);
    color: white;
  }
  .sortbar{
    list-style: none;
    text-align: center;
  }
  .sortbar li{
    height: 50px;
    line-height: 50px;
    border-bottom: 0.5px solid #eee;
  }
  .filterbar{
    width: 100%;
    list-style: none;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
  }
  .filterbar li{
    width: 18%;
    height: 30px;
    line-height: 30px;
    margin: 10px 13px;
    background: #f5f5f5;
    font-size: 12px;
    color: #646464;
  }
  .big{
    width: 94%;
    margin: 0 auto;
    margin-bottom: 31px;
  }
  .list{
    margin: 15px 0;
    background: white;
    border-radius:5px;
  }
  .tit{
    font-size: 17px;
    padding-top: 30px;
    padding-left: 10px;
  }
  .date{
    color: #777;
    font-size: 12px;
    padding-top: 10px;
    padding-left: 10px;
  }
  img{
    width: 30px;
    height: 30px;
    border-radius: 50px;
    margin-right: 10px;
  }
  .teacher{
    padding-top: 12px;
    padding-left: 10px;
    display: flex;
    align-items: center;
    color: #777;
    font-size: 12px;
  }
  .botmes{
    padding-left: 10px;
    padding-right: 10px;
    padding: 30px 10px 10px 10px;
    display: flex;
    justify-content: space-between;
  }
  .botmes .left{
    color: #777;
    font-size: 12px;
  }
  .botmes .right{
    color: #44a426;
    font-size: 16px;
  }
  .hint{
    height: 77px;
    color: #969799;
    font-size: 14px;
    text-align: center;
  }
  
</style>